<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addHandle">新增</el-button>
      </template>
      <template #statusStr="{row}">
        <el-tag v-if="row.status === 0" type="success">{{ row.statusStr }}</el-tag>
        <el-tag v-else type="info">{{ row.statusStr }}</el-tag>
      </template>
      <template #handle="{row}">
        <el-button type="text" @click="showDetail(row)">详情</el-button>
        <el-button type="text" @click="addNumber(row)">增加数量</el-button>
        <el-button type="text" :class="row.status === 1 ? '':'danger-text-button'" @click="editStatus(row)">{{ row.status === 1 ? '发行': '停发' }}</el-button>
        <el-button type="text" @click="gotoRecord(row)">使用记录</el-button>
      </template>
    </pf-table>
    <AddNumber
      v-if="showNumber"
      :id="couponId"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { COUPON_TYPE, COUPON_STATUS } from '@/utils/enum'
import { mapGetters } from 'vuex'
import AddNumber from './AddNumber.vue'
import { getCouponList, editCouponStatus } from '@/api/coupon'
export default {
  name: 'CouponList',
  components: {
    AddNumber
  },
  data() {
    return {
      couponTypeOptions: COUPON_TYPE,
      couponStatusOptions: COUPON_STATUS,
      showNumber: false,
      couponId: '',
      form: {},
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '优惠券名称', prop: 'couponName', attrs },
        { label: '类型', prop: 'couponTypeStr', attrs },
        { label: '可用范围', prop: 'couponRangeStr', attrs },
        { label: '优惠内容', prop: 'couponContent', attrs },
        { label: '库存量', prop: 'inventoryNum', attrs },
        { label: '发放量', prop: 'distributionNum', attrs },
        { label: '已使用比例', prop: 'ratio', attrs },
        { label: '发放渠道', prop: 'couponChannelStr', attrs },
        { label: '状态', slot: 'statusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { fixed: 'right', width: '240px' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '优惠券名称',
          prop: 'couponName',
          formItemAttrs: { labelWidth: '100px' }
        }, {
          type: 'select',
          label: '类型',
          prop: 'couponType',
          options: this.couponTypeOptions
        }, {
          type: 'select',
          label: '状态',
          prop: 'status',
          options: this.couponStatusOptions
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const data = {
        pageNo,
        pageSize,
        siteId: this.currentSite.id,
        ...formQuery
      }
      getCouponList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 新增
    addHandle() {
      this.$router.push({
        path: '/marketing/coupon/detail'
      })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/marketing/coupon/detail',
        query: {
          id: row.id
        }
      })
    },

    // 使用记录
    gotoRecord(row) {
      this.$router.push({
        path: '/marketing/coupon/record',
        query: {
          id: row.id
        }
      })
    },

    // 修改状态
    editStatus(row) {
      const data = {
        id: row.id,
        status: row.status === 1 ? 0 : 1
      }
      let message = ''
      let tip = ''
      if (row.status === 1) {
        message = '确定要开始发行该优惠券吗？'
        tip = '发行成功'
      } else {
        message = '确定要停止发放该优惠券吗？'
        tip = '停发成功'
      }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        editCouponStatus(data).then(() => {
          this.$message.success(tip)
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      })
    },

    // 增加数量
    addNumber(row) {
      this.couponId = row.id
      this.showNumber = true
    },

    // 关闭弹窗
    closeHandle() {
      this.showNumber = false
    },

    // 确认
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
